<html>
  <head>
    <title>ESP IOT DASHBOARD</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
   <div class="topnav">
   <h1>5G网联控制平台</h1>
    </div>
    <div class="content">
      <div class="left">
        <div class="checkbox">
          <span>灯光</span>
          <div class="checkboxclass">
            <input type="checkbox" id="sliderValue5" onchange="updateSliderPWM(this)"/>
            <label for="sliderValue5"></label>
          </div>
        </div>
        <div class="checkbox">
          <span>发射 </span>
          <div class="checkboxclass">
            <input type="checkbox" id="sliderValue6" onchange="updateSliderPWM(this)" />
            <label for="sliderValue6"></label>
          </div>
        </div>
        <div class="bottom">
          <p><span>前后: </span><span id="sliderValue1">0</span></p>
          <p>
            <input
              type="range"
			  oninput="updateSliderPWM(this)"
              id="pwmSlider1"
              min="-100"
              max="100"
              value="0"
              step="1"
              class="slider"
            />
          </p>		  
        </div>
      </div>
      <div class="center">
        <img src="" id="photo" >
      </div>
      <div class="right">
        <div>
          <p onclick="reSize(0)">
            <span>炮台旋转</span><span id="sliderValue2">0</span>
          </p>
          <p>
            <input
              type="range"
			  oninput="updateSliderPWM(this)"
              id="pwmSlider2"
              min="-100"
              max="100"
              value="0"
              step="1"
              class="slider"
            />
          </p>
        </div>
        <div>
          <p onclick="reSize(0)">
            <span>炮台俯仰</span><span id="sliderValue3">0</span>
          </p>
          <p>
            <input
              type="range"
			  oninput="updateSliderPWM(this)"
              id="pwmSlider3"
              min="-100"
              max="100"
              value="0"
              step="1"
              class="slider"
            />
          </p>
        </div>
        <div class="bottom">
          <p onclick="reSize(0)">
            <span>左右: </span><span id="sliderValue4">0</span>
          </p>
          <p>
            <input
              type="range"
			  oninput="updateSliderPWM(this)"
              id="pwmSlider4"
              min="-100"
              max="100"
              value="0"
              step="1"
              class="slider"
            />
          </p>
        </div>
      </div>
    </div>

  </body>
  <script>
  
    var doms = {
      pwm1: {
        slider: "",
        text: "",
      },
      pwm2: {
        slider: "",
        text: "",
      },
      pwm3: {
        slider: "",
        text: "",
      },
      pwm4: {
        slider: "",
        text: "",
      },
    };
	<!-- onchange="updateSliderPWM(this)" -->
    doms.pwm1.slider = document.getElementById("pwmSlider1");
    doms.pwm1.text = document.getElementById("sliderValue1");
    doms.pwm2.slider = document.getElementById("pwmSlider2");
    doms.pwm2.text = document.getElementById("sliderValue2");
    doms.pwm3.slider = document.getElementById("pwmSlider3");
    doms.pwm3.text = document.getElementById("sliderValue3");
    doms.pwm4.slider = document.getElementById("pwmSlider4");
    doms.pwm4.text = document.getElementById("sliderValue4");

    doms.pwm1.slider.addEventListener("input", function () 
	{doms.pwm1.text.textContent = this.value;});
    doms.pwm1.slider.addEventListener("mouseup", function () 
	{  this.value = 0;
		doms.pwm1.text.textContent = 0;	
	    updateSliderPWM(this);	
      });
    doms.pwm2.slider.addEventListener("input", function () 
	{doms.pwm2.text.textContent = this.value;});
	
    doms.pwm3.slider.addEventListener("input", function () 
	{doms.pwm3.text.textContent = this.value;});
	 doms.pwm3.slider.addEventListener("mouseup", function () 
	 {
      this.value = 0;
      doms.pwm3.text.textContent = 0;
	  updateSliderPWM(this);	
    });
    doms.pwm4.slider.addEventListener("input", function () 
	{ doms.pwm4.text.textContent = this.value;});
	 doms.pwm4.slider.addEventListener("mouseup", function () 
	 {
      this.value = 0;
      doms.pwm4.text.textContent = 0;
	  updateSliderPWM(this);	
    });
    doms.sliderValue5 = document.getElementById("sliderValue5");
    doms.sliderValue5.addEventListener("change", function () {
      if (this.checked) {
        console.log("开关1开");
      } else {
        console.log("开关1闭");
      }
    });

    doms.sliderValue6 = document.getElementById("sliderValue6");
    doms.sliderValue6.addEventListener("change", function () {
      if (this.checked) {
        console.log("开关2开");
      } else {
        console.log("开关2闭");
      }
    });
  </script>
  
  <script src="script.js"></script>
</html>